<template>
	<view class="homebox">
		<!-- 		<view class="czname">
			测站信息
		</view> -->
		<!-- 分段器 -->
		<u-sticky offsetTop="0">
			<view class="" style="background-color: #f2f2f6;">
				<u-subsection :list="listSub" fontSize="18" mode="subsection" :current="currentSub"
					activeColor="#304ea3" @change="change3"></u-subsection>
			</view>
		</u-sticky>
		<view class="box_net" v-if="currentSub == 1">
			<view class="box_t" v-for="(i,index) in stationList" :key="index" @click="stationFn(i)">
				<view class="ti">
					{{i.name}}
				</view>
				<view class="flx">
					<view class="ie">
						<text>测线条数：</text>
						<text class="text">{{i.cexiantiaoshu}}</text>
					</view>
					<view class="ie">
						<text>渠底宽度：</text>
						<text class="text">{{i.qudikuandu}}</text>
					</view>
				</view>
				<view class="flx">
					<view class="ie">
						<text>测量方法：</text>
						<text class="text">{{i.morencefa}}点法</text>
					</view>
					<view class="ie" v-if="i.xingzhuang == 1">
						<text>断面形状：</text>
						<text class="text">矩形</text>
					</view>
					<view class="ie" v-if="i.xingzhuang == 0">
						<text>断面形状：</text>
						<text class="text">梯形</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 本地数据 -->
		<view class="box_lo" v-if="currentSub == 0">
			<view class="czinput">
				<view class="lebox">
					名称：
				</view>
				<view class="leboxinput">
					<view class="">
						<uni-easyinput v-model="cezhanitem.name" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					编码：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.nub" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					定位点
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					经度：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.lot" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					纬度：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.lat" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="button">
				<u-button type="success" shape="circle" text="点击获取经纬度" @click="loalonFn"></u-button>
			</view>
			<view class="hetop">
				<view class="titleclass">
					测段参数
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					断面形状：
				</view>
				<view class="">
					<uni-data-checkbox v-model="cezhanitem.xingzhuang" :localdata="range"></uni-data-checkbox>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					渠底宽度：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qudikuandu" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
<!-- 			<view class="czinput">
				<view class="lebox">
					设计水深：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shejishuishen" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					设计流量：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shejiliuliang" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
<!-- 			<view class="czinput">
				<view class="lebox">
					上限水深：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shangxianshuishen" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
<!-- 			<view class="czinput">
				<view class="lebox">
					下限水深：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.xiaxianshuishen" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
<!-- 			<view class="czinput">
				<view class="lebox">
					渠底纵坡：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qudizongpo" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
<!-- 			<view class="czinput">
				<view class="lebox">
					渠坡糙率：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qupocaolv" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<view class="hetop">
				<view class="titleclass">
					边坡角度
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					左坡角：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.lSA" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					右坡角：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.rSA" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					标准测法
				</view>
			</view>

<!-- 			<view class="czinput">
				<view class="lebox">
					测线布置：
				</view>
				<view class="">
					<uni-data-checkbox v-model="cezhanitem.cexianbuzhi" :localdata="range2"></uni-data-checkbox>
				</view>
			</view> -->
			<view class="czinput">
				<view class="lebox">
					默认测法：
				</view>
				<view class="">
					<uni-data-checkbox v-model="cezhanitem.morencefa" :localdata="range3"></uni-data-checkbox>
				</view>
			</view>
<!-- 			<view class="hetop">
				<view class="titleclass">
					边坡系数
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					左坡系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.kL" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					右坡系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.kR" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox" style="width: 260rpx">
					水位修正：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.zijishuishenxiuzheng" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<view class="hetop">
				<view class="titleclass">
					单条测线
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					测线条数：
				</view>
				<view class="">
					<view class="" style="width: 300rpx;">
						<uni-data-select :clear="false" v-model="cezhanitem.cexiantiaoshu" :localdata="range1"
							placeholder="请选择测线条数" @change="change1"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="" style="height: 30rpx;">

			</view>
			<view class="qicebox">
				<view class="qicedian">
					测线编号
				</view>
				<view class="qicedian">
					水平坐标
				</view>
				<view class="qicedian">
					行走距离
				</view>
				<view class="qicedian">
					架空高度
				</view>
			</view>
			<view class="qicebox" v-for="(item,index) in cezhanitem.cexianlist" :key="index">
				<view class="qicinput">
					{{item.id}}
				</view>
				<view class="qicinput">
					<!-- {{item.zuobiao}} -->
					<u--input v-model="item.cR" placeholder="请输入内容" border="none" type="digit"></u--input>
				</view>
				<view class="qicinput">
					<!-- {{item.xishu}} -->
					<u--input v-model="item.zJ" placeholder="请输入内容" border="none" type="digit"></u--input>
				</view>
				<view class="qicinput">
					<!-- {{item.xishu}} -->
					<u--input v-model="item.bC" placeholder="请输入内容" border="none" type="digit"></u--input>
				</view>
			</view>
			<view class="" style="color: #144892;">
				架空高度为上止点时铅鱼底部到渠底的高度
			</view>
			<view class="czinput">
				<view class="" style="width: 350rpx;">
					流速仪距铅鱼底：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qk" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
<!-- 			<view class="czinput">
				<view class="lebox">
					水量系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shuiliangxishu" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
<!-- 			<view class="hetop">
				<view class="titleclass">
					边坡测线流速系数
				</view>
			</view> -->
<!-- 			<view class="czinput">
				<view class="lebox">
					右坡测线系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.vmL" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
<!-- 			<view class="czinput">
				<view class="lebox">
					左坡测线系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.vmR" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<view class="" style="height: 100rpx;">
				<u-button @click="saveCezhan" type="primary" shape="circle" text="保存到本地"></u-button>
			</view>
			<view class="" style="height: 100rpx;">

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				listSub: ['修改数据', '网络列表'],
				currentSub: 1,
				cezhanitem: {
					cexianlist: []
				},
				range: [{
					text: '梯形',
					value: 0
				}, {
					text: '矩形',
					value: 1
				}, ],
				range1: [{
						text: '1条测线',
						value: 1
					},
					{
						text: '2条测线',
						value: 2
					},
					{
						text: '3条测线',
						value: 3
					},
					{
						text: '4条测线',
						value: 4
					},
					{
						text: '5条测线',
						value: 5
					},
					{
						text: '6条测线',
						value: 6
					},
					{
						text: '7条测线',
						value: 7
					},
					{
						text: '8条测线',
						value: 8
					},
					{
						text: '9条测线',
						value: 9
					},
				],
				range2: [{
						text: '均匀',
						value: 1
					},
					{
						text: '不均匀',
						value: 2
					}
				],
				range3: [{
						text: '一点法',
						value: 1
					},
					{
						text: '三点法',
						value: 3
					}
				],
				stationList: [],
				InterfaceData: []
			}
		},
		onLoad(option) {
			this.stationProFn()
		},
		onShow() {

		},
		methods: {
			loalonFn() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.cezhanitem.lot = res.longitude
						this.cezhanitem.lat = res.latitude
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});

			},
			// 分段器
			change3(index) {
				this.currentSub = index
			},
			// 选择测线
			change1(e) {
				this.cezhanitem.cexianlist.length = 0
				let arrdata = {
					cR: '',
					zJ: ''
				}
				for (var i = 0; i < e; i++) {
					this.cezhanitem.cexianlist.push({
						id: 1 + i,
						cR: '',
						zJ: '',
						bC: ''
					})
				}

			},
			// 断面信息列表
			stationProFn() { 
				uni.$u.http.get('/device/stationProfile/list').then(res => {
					console.log('res',res);
					if (res.code == 200) {
						let arr = res.rows
						for (let i = 0; i < arr.length; i++) {
							arr[i].cexianlist = JSON.parse(arr[i].cexianlist)
						}
						this.stationList = arr
					} else {
						uni.redirectTo({
							url: '/pages/login'
						});
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 点击断面
			stationFn(i) {
				this.currentSub = 0
				this.cezhanitem = i
				this.loalonFn()
			},
			// 保存测站信息
			saveCezhan() {
				if (this.cezhanitem.cexiantiaoshu == 0) {
					uni.showToast({
						title: '未选择测线',
						duration: 1500
					});
					return
				}
				let date = Date.parse(new Date())
				this.cezhanitem.id = date
				let datalist = []
				datalist = this.vuex_saveCezhandata
				datalist.unshift(this.cezhanitem)
				uni.$u.vuex('vuex_saveCezhandata', datalist)
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	// 网络列表
	.box_net {
		margin-top: 30rpx;

		.box_t {
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #f5f7f9;
			border: 5rpx solid #fff;
			box-shadow: 0 0 10rpx 5rpx rgba(183, 198, 221, 0.9);

			.ti {
				text-align: center;
				font-size: 45rpx;
				color: #000000;
			}

			.flx {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 60rpx;

				.ie {
					color: #444444;
					width: 320rpx;

					.text {
						font-size: 40rpx;
						color: #5b4c95;
						font-weight: bold;
					}

				}
			}
		}
	}

	.titleclass {
		color: #144892;
	}

	.hetop {
		text-align: center;
		line-height: 60rpx;
		background-color: #e8f2fd;
		border-radius: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.homebox {
		width: 690rpx;
		padding: 0 30rpx;

		.czname {
			display: flex;
			justify-content: center;
			line-height: 100rpx;
			font-size: 40rpx;
			color: #144892;
		}

		.box_lo {
			.czinput {
				font-size: 35rpx;
				padding: 20rpx 20rpx;
				display: flex;
				align-items: center;
				border-radius: 0rpx;
				margin-bottom: 20rpx;

				.lebox {
					width: 250rpx;
				}
			}
		}

		.button {
			padding: 0 30rpx 30rpx 30rpx;
		}

		.qicebox {
			display: flex;
			justify-content: center;
			align-items: center;

			.qicedian {
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: #fffcf8;
				// border: #dddcda solid 1rpx;
				background-color: #144892;
				border-radius: 20rpx 20rpx 0 0;
			}

			.qicinput {
				width: 160rpx;
				height: 100rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 100rpx;
				color: #7e7d7a;
				border: #dddcda solid 1rpx;
				background-color: #ffffff;
			}
		}
	}
</style>
<style>
	page {
		background-color: #f5f7f9;
	}
</style>